<template>
  <div class="mainBox">
    <el-descriptions title="奖励金设置" :column="2" border style="width: 100%">
      <el-descriptions-item label="客货类型">
        <template #default="scope">
          {{ props.awardModel.carType == 0 ? "货车" : "客车" }}
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="套餐名称">
        {{ props.awardModel.name }}
      </el-descriptions-item>
      <el-descriptions-item label="套餐系列">
        {{ props.awardModel.seriesName }}
      </el-descriptions-item>
      <el-descriptions-item label="售卖总价">
        {{ props.awardModel.price }}
      </el-descriptions-item>
    </el-descriptions>
    <el-form :model="model" style="width: 80%">
      <table class="edit-table">
        <thead>
          <th>类型</th>
          <th>比例</th>
          <th>单笔上限</th>
          <th>比例</th>
        </thead>
        <tr>
          <td>首单返利</td>
          <td>
            <!-- <el-input v-model="model.firstRebate"></el-input> -->
            <el-input-number
              v-model="model.firstRebate"
              :min="0"
              :controls="false"
            />
          </td>
          <td>
            <el-radio-group
              v-model="setFirstRebateCelling"
              :change="
                setFirstRebateCelling ? true : (model.firstRebateCelling = null)
              "
            >
              <el-radio :label="false">不设置</el-radio>
              <el-radio :label="true">设置</el-radio>
            </el-radio-group>
          </td>
          <td>
            <!-- <el-input v-model="model.firstRebateCelling" :disabled="!topfirstRadio"></el-input> -->
            <el-input-number
              v-model="model.firstRebateCelling"
              :disabled="!setFirstRebateCelling"
              :min="0"
              :controls="false"
            />
          </td>
        </tr>
        <tr>
          <td>非首单返利</td>
          <td>
            <!-- <el-input v-model="model.notFirstRebate"></el-input> -->
            <el-input-number
              v-model="model.notFirstRebate"
              :min="0"
              :controls="false"
            />
          </td>
          <td>
            <el-radio-group
              v-model="setNotFirstRebateCelling"
              :change="
                setNotFirstRebateCelling
                  ? true
                  : (model.notFirstRebateCelling = null)
              "
            >
              <el-radio :label="false">不设置</el-radio>
              <el-radio :label="true">设置</el-radio>
            </el-radio-group>
          </td>
          <td>
            <!-- <el-input v-model="model.notFirstRebateCelling" :disabled="!topnotfirstRadio"></el-input> -->
            <el-input-number
              v-model="model.notFirstRebateCelling"
              :disabled="!setNotFirstRebateCelling"
              :controls="false"
              :min="0"
            />
          </td>
        </tr>
        <tr>
          <td>阈值</td>
          <td>
            <el-input-number
              :precision="2"
              v-model="model.thresholdValue"
              :controls="false"
              :max="props.awardModel.price"
              :min="0"
            />
          </td>
          <td>预充金金额</td>
          <td>
            <el-input-number
              :precision="2"
              v-model="model.prechargedGold"
              :controls="false"
              :max="props.awardModel.price"
              :min="0"
            />
          </td>
        </tr>
      </table>
    </el-form>
    <div class="btnBox">
      <el-button type="primary" color="#ea5b24" @click="emit('packConfigBack')"
        >返回</el-button
      >
      <el-button type="primary" color="#ea5b24" @click="editBountySubmit()"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { editBountyApi, findBountyApi, addBountyApi } from "../../../api/index";
import { ElMessage } from "element-plus";
//父级传递过来的参数
const props = defineProps(["awardModel"]);
//父级传递的方法
const emit = defineEmits(["packConfigBack"]);

let tableData: any = reactive([]);
let isAddOrModify = 0;

//是否禁用单笔上限
var setFirstRebateCelling = ref(true);
var setNotFirstRebateCelling = ref(true);

// 修改会员套餐返利模型
const model = reactive({
  creator: null, //创建人
  firstRebate: null, //首单返利
  firstRebateCelling: null, //首单返利上限
  notFirstRebate: null, //非首单返利
  notFirstRebateCelling: null, //非首单返利上限
  thresholdValue: null, //阈值
  prechargedGold: null, //	预充金
  vipId: null, //会员id
});

//查询会员套餐返利规则
const findBountySubmit = () => {
  //清空model数据
  Object.keys(model).forEach((key) => (model[key] = ""));
  //查询方法
  findBountyApi(Number(props.awardModel.vipId)).then((res) => {
    if (res.data.code === 2000) {
      tableData.data = res.data.data;
      if (res.data.data == null) {
        isAddOrModify = 0;
      } else {
        isAddOrModify = 1;
        //设置返利规则数据
        model.firstRebate = tableData.data.firstRebate;
        model.firstRebateCelling = tableData.data.firstRebateCelling;
        model.notFirstRebate = tableData.data.notFirstRebate;
        model.notFirstRebateCelling = tableData.data.notFirstRebateCelling;
        model.thresholdValue = tableData.data.thresholdValue;
        model.prechargedGold = tableData.data.prechargedGold;
      }
    } else {
      ElMessage.error("查询失败");
    }
  });
};

//暴露子组件方法
defineExpose({ findBountySubmit });

//修改会员套餐返利
const editBountySubmit = () => {
  if (model.firstRebate == null || model.firstRebate == "") {
    ElMessage.error("请设置首单返利.");
    return;
  }
  if (
    setFirstRebateCelling.value &&
    (model.firstRebateCelling == null || model.firstRebateCelling == "")
  ) {
    ElMessage.error("请设置首单返利单笔上限比例.");
    return;
  }
  if (model.notFirstRebate == null || model.notFirstRebate == "") {
    ElMessage.error("请设置非首单返利.");
    return;
  }
  if (
    setNotFirstRebateCelling.value &&
    (model.notFirstRebateCelling == null || model.firstRebateCelling == "")
  ) {
    ElMessage.error("请设置非首单返利单笔上限比例.");
    return;
  }
  if (model.thresholdValue == null || model.thresholdValue == "") {
    ElMessage.error("请设置阈值.");
    return;
  }
  if (model.prechargedGold == null || model.prechargedGold == "") {
    ElMessage.error("请设置预充金.");
    return;
  }
  if (isAddOrModify) {
    editBountyApi({
      creator: model.creator,
      firstRebate: model.firstRebate || 0,
      firstRebateCelling: model.firstRebateCelling || 0,
      notFirstRebate: model.notFirstRebate || 0,
      notFirstRebateCelling: model.notFirstRebateCelling || 0,
      prechargedGold: model.prechargedGold || 0,
      thresholdValue: model.thresholdValue || 0,
      vipId: props.awardModel.vipId,
    }).then((res) => {
      if (res.data.code === 2000) {
        ElMessage({
          message: "修改成功.",
          type: "success",
        });
      } else {
        ElMessage.error("修改失败");
      }
    });
  } else {
    model.creator = 1;
    model.vipId = props.awardModel.vipId;
    addBountyApi(model).then((res) => {
      if (res.data.code === 2000) {
        ElMessage({
          message: "添加成功.",
          type: "success",
        });
        isAddOrModify = 1;
      } else {
        ElMessage.error("添加失败");
      }
    });
  }
};
</script>
<style scoped>
.mainBox {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btnBox {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  width: 200px;
}

.edit-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 50px;
  color: #606266;
}

.edit-table th {
  background-color: #f5f7fa;
  height: 50px;
}

.edit-table td {
  column-span: all;
  padding: 8px 11px;
}

:deep(.el-input-number) {
  width: 100%;
}
</style>
